  <template>
  <div>
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
      <el-row>
        <el-col :span="2.5">
          <el-form-item>
            <el-select v-model="queryParams.groupId" style="width: 120px;">
              <el-option
                v-for="item in groupOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                placeholder="分组"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4.5">
          <el-form-item>
            <el-input
              v-model="queryParams.searchStr"
              placeholder="请输入入住人或房源地址、联系方式"
              clearable
              style="width: 240px"
              @keyup.enter="handleQuery"
            >
              <template #append>
                <el-button :icon="Search" @click="handleQuery" />
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="list">
      <el-table-column label="入住人">
        <template #default="{ row }">
          {{ row.renterList ? row.renterList[0].name : '---' }}
        </template>
      </el-table-column>
      <el-table-column label="联系方式">
        <template #default="{ row }">
          {{ row.renterList ? row.renterList[0].contacts : '---' }}
        </template>
      </el-table-column>
      <el-table-column label="地址">
        <template #default="{ row }">
          {{ row.room ? row.room.buildingName + row.room.name : '---'}}
        </template>
      </el-table-column>
      <el-table-column label="预定周期">
        <template #default="{ row }">
          {{row.checkInDate}} ~ {{row.checkOutDate}}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="{ row }">
          入住中（{{row.remainDays}}/{{row.totalDays}}）
        </template>
      </el-table-column>
      <el-table-column label="分组" prop="branchName"></el-table-column>
      <el-table-column label="操作人" prop="branchName"></el-table-column>
      <el-table-column label="备注" prop="remarks"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleDetail(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
  <BookDetail :visible="bookVisible" @cancel="() => bookVisible = false" @linkto="() => bookVisible = false" />
</template>
<script setup name="TenantPane">
import { Search } from '@element-plus/icons-vue'
import groupApi from '@/api/setting/group'
import BookDetail from '@/views/room/component/bookingManagement/bookDetail.vue'


const groupOptions = ref([])
const list = ref([])
const loading = ref(false)
const total = ref(0)
const bookVisible = ref(false)

const data = reactive({
  queryParams: {
    groupId: null,
    searchStr: null,
    pageNum: 1,
    pageSize: 10
  },
})
const { queryParams } = toRefs(data)


/* 搜索 */
function handleQuery() {
  getList()
}


/* 详情 */
function handleDetail(row) {
  bookVisible.value = true
}

/* 获取列表 */
function getList() {
  loading.value = true
  setTimeout(() => {
    list.value = [{
      renterName: '林某某',
      contacts: '13799060779',
      buildingName: '劲叶公寓',
      chamberName: '0503',
      checkInDate: '2023-12-21',
      checkOutDate: '2024-12-20',
      remainDays: 260,
      totalDays: 364,
      status: 0,
      branchName: '县城片区'
    }]
    total.value = 1
    loading.value = false
  }, 500);
}

// 获取分组列表
function getGroupList() {
  groupApi.getList().then(res => {
    groupOptions.value = res.rows.map(item => ({
      label: item.groupName,
      value: item.groupId
    }))
    queryParams.value.groupId = groupOptions.value[0].value
  })
}
getGroupList()
getList()
</script>
